<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <button class="btn left" @click="goBack">取消</button>
    <h2 class="title" v-if="type=='1'">新增人员</h2>
    <h2 class="title" v-if="type=='2'">{{edit?'编辑人员':'人员详情'}}</h2>
    <button class="btn" @click="submit">{{edit?'保存':'编辑'}}</button>
  </header>
  <div class="page">
    <div class="mb30">
      <div class="displayflex form-box">
        <div class="label">姓名</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="name" placeholder="请输入" v-if="edit" >
          <div class="txt-rit" v-if="!edit">{{name}}</div>
        </div>
      </div>
      <div class="displayflex form-box">
        <div class="label">手机</div>
        <div class="flex1 ctx">
          <input type="text" class="txt-rit" v-model="tel"  placeholder="请输入"  v-if="edit && type==1">
          <input type="text" class="txt-rit gray" v-model="tel"  placeholder="请输入"  v-else readonly>
          <!-- <div class="txt-rit" v-if="!edit || type==2">{{tel}}</div> -->
        </div>
      </div>
      <div class="displayflex form-box mb0 lineb" v-if="edit">
        <x-address class="address-wrap" title="省市区" v-model="addressValue" :list="addressData" placeholder="请选择" value-text-align="right"></x-address>
        <div class="txt-rit" style="display:none" id="addressChinese">{{addressValue[0] | province}}/{{addressValue[1] | city}}/{{addressValue[2] | district}}</div>
        <i class="iconfont icon-right"></i>
      </div>
      <div class="displayflex form-box mb0 lineb" v-if="!edit">
        <div class="label">省市区</div>
        <div class="flex1 ctx">
          <div class="txt-rit">{{addressValue[0] | province}}{{addressValue[1] | city}}{{addressValue[2] | district}}</div>
        </div>
      </div>
      <div class="displayflex form-box">
        <div class="label">详细地址</div>
        <div class="flex1 ctx">
          <textarea placeholder="请输入" v-model="cpyAddress" v-if="edit"></textarea>
          <div class="txt-rit" v-else>{{cpyAddress}}</div>
        </div>
      </div>
      
      <div class="form-switch mb0 lineb">
        <x-switch title="开通账户" v-model="openAccount" prevent-default :disabled="!edit"></x-switch>
      </div>
      <div class="displayflex form-box">
        <popup-picker class="picker-wrap" 
            title="账户类型" 
            :data="classfiyList" 
            placeholder="点击选择" 
            value-text-align="right"
            :show-name="classfiyshow"
            v-model="classfiy"></popup-picker>
        <i class="iconfont icon-right"></i>
        <div class="form-mask" v-show="selectshow" @click="onbtn"></div>
      </div>
    </div>
    <template>
      <uploader-img :word="'头像'" :max="1" v-model="picJson" :list="picJson" :editflag="edit"></uploader-img>
    </template>
  </div>
  <div class="btn-bottom"><div class="btn" @click="submit">{{edit?'保存':'编辑'}}</div></div>
  <div id="mapcontainer" style="display:none; width:0px; height:0px"></div>
</div>
</template>
<script>
import uploaderImg from "@/components/share/uploader.vue";
export default {
  components: {
    uploaderImg
  },
  data() {
    return {
      name: "",
      tel: "",
      cpyAddress: "",
      addressValue: [],
      addressData: this.ChinaAddressV3Data,
      edit: false,
      Guid: "",
      picJson: {
        imgLista: [],
        imgListBase: []
      },
      selectshow: false,
      userbiztype: "",
      openAccount: true,
      //账户类型
      classfiyshow: true,
      classfiy: [],
      classfiyList: [
        [
          {
            value: "warehouse",
            name: "仓管员"
          },
          {
            value: "Cargoreceiver",
            name: "收货员"
          }
        ]
      ],
      showLoad: false
    };
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    },
    type() {
      return this.$route.query.type || "";
    }
  },
  watch: {
    classfiy(n) {
      this.userbiztype = n[0];
    }
  },
  created() {
    if (this.type == "2") {
      this.edit = false;
      this.selectshow = true;
      this.getdata();
      document.title = "编辑人员";
    } else {
      this.selectshow = false;
      this.edit = true;
      document.title = "新增人员";
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onbtn() {
      this.$vux.toast.show({
        type: "warn", //success, warn, cancel, text
        text: "账户类型不允许修改！"
      });
      return false;
    },
    getdata() {
      if (sessionStorage.userscustomItem) {
        var item = JSON.parse(sessionStorage.userscustomItem);

        this.name = item.Name;
        this.tel = item.MobileNo;
        this.StaffID = item.StaffID;

        if (item.BizState == "Y") {
          this.openAccount = true;
        } else {
          this.openAccount = false;
        }
        this.userbiztype = item.UserBizType;
        this.classfiy.push(item.UserBizType);

        this.addressValue.push(item.Province);
        this.addressValue.push(item.City);
        this.addressValue.push(item.District);
        this.cpyAddress = item.Address;
        if (item.PictContent && item.PictContent.indexOf(".") != -1) {
          this.picJson.imgLista = JSON.parse('['+ JSON.stringify(item.PictContent) +']');
        } else {
          this.picJson.imgLista =
            item.PictContent == null ? [] : JSON.parse(item.PictContent);
        }
      }
    },
    submit() {
      if (!this.name) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请输入姓名！"
        });
        return false;
      }
      if (!this.tel) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请输入手机号！"
        });
        return false;
      }
      var testTel = /^1[345789]\d{9}$/;
      if (!this.tel || !testTel.test(this.tel)) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请输入正确格式的手机号"
        });
        return false;
      }
      // if (!this.addressValue[0]) {
      //   this.$vux.toast.show({
      //     type: "warn", //success, warn, cancel, text
      //     text: "请选择省份！"
      //   });
      //   return false;
      // }
      // if (!this.addressValue[1]) {
      //   this.$vux.toast.show({
      //     type: "warn", //success, warn, cancel, text
      //     text: "请选择城市！"
      //   });
      //   return false;
      // }
      // if (!this.addressValue[2]) {
      //   this.$vux.toast.show({
      //     type: "warn", //success, warn, cancel, text
      //     text: "请选择区域！"
      //   });
      //   return false;
      // }
      // if (!this.cpyAddress) {
      //   this.$vux.toast.show({
      //     type: "warn", //success, warn, cancel, text
      //     text: "请输入详细地址！"
      //   });
      //   return false;
      // }

      if (this.userbiztype == "") {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请选择账户类型！"
        });
        return false;
      }
      this.edit = !this.edit;
      if (this.edit) {
        return false;
      }

      this.showLoad = true;
      var _this = this,
        txt = "",
        bizstate = "N";
      if (this.openAccount) {
        bizstate = "Y";
      }
      var query = {
        Name: this.name,
        MobileNo: this.tel,
        Province: this.addressValue[0],
        City: this.addressValue[1],
        District: this.addressValue[2],
        Address: this.cpyAddress,
        LogonUser: this.tel,
        LoginedStaffID: this.userinfo.StaffID,
        LoginedName: this.userinfo.Name,
        AreaFullText: document.getElementById("addressChinese").innerHTML,
        TenantGuid: this.userinfo.TenantGuid,
        CorpGuid: this.userinfo.CorpGuid,
        CorpName: this.userinfo.CorpName,
        BelongGuid:this.userinfo.CorpGuid,
        BelongName:this.userinfo.CorpName,
        UserBizType: this.userbiztype,
        BizState: bizstate,

        imgUrla: this.picJson.imgListBase
      };
      if (this.type == "2") {
        query.StaffID = this.StaffID;
        txt = "编辑成功。";
      } else if (this.type == "1") {
        txt = "新增成功";
      };

      this.Ajax.post("OperateCustomerAPI", query).then(function(resp) {
        _this.showLoad = false;
        if (resp.IsSuccess) {
          if (bizstate == "Y") {
            if(_this.type==1){
              _this.sendmsg(_this.tel);
            };
            if(sessionStorage.userscustomItem){
              var item = JSON.parse(sessionStorage.userscustomItem);
            };
            if (item && item.BizState == "N") {
              _this.sendmsg(_this.tel); //发送短信
            } else {
              _this.$vux.toast.show({
                type: "success", //success, warn, cancel, text
                text: txt
              });
            }
          } else {
            _this.$vux.toast.show({
              type: "success", //success, warn, cancel, text
              text: txt
            });
          }
          _this.$router.push({
            path: "/user/custom"
          });
        } else {
          _this.edit = !_this.edit;
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.ErrorMessage
          });
        }
      });
    },
    sendmsg(tel) {
      var _this = this;
      var txt = "";
      if (this.type == "2") {
        txt = "编辑成功，编辑的账号信息已发送。";
      } else if (this.type == "1") {
        txt = "新增成功，开通的账号信息已发送。";
      };
      var content =
        "【来誉链享】 您的账号是：" +
        tel +
        ",密码是：123456。如非本人操作，请忽略本短信";
      var query = {
        ContactTel: tel,
        Content: content
      };
      this.Ajax.post("SendMessage", query).then(function(resp) {
        if (resp.IsSuccess) {
          _this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: txt
          });
        }
      });
    }
  }
};
</script>